<!--
author: 何其沆(pooky)
desc: 进度条组件封装
date: 2021-11-15
-->
<template>
  <div class="progress">
    <div class="progress-item">
      <div
        v-if="tags[0] === 'Phase 3' || tags[0] === 'Phase 2' || tags[0] === 'Phase 1' || tags[0] === 'Phase 0'"
        class="phase3"
        :style="{ width: tags[0] === 'Phase 3' ? '50%' : '100%' }"></div>
      <div class="name">
        <span>{{
          clientPhaseList[clientPhaseList.length - 1].entryDateAdd === '--'
            ? ''
            : clientPhaseList[clientPhaseList.length - 1].entryDateAdd
        }}</span>
        <span>{{ clientPhaseList[clientPhaseList.length - 1].displayName }}</span>
      </div>
      <div class="triangle">
        <e-icon
          type="Unfold"
          font-size="16px"
          :style="{
            color:
              tags[0] === 'Phase 3' || tags[0] === 'Phase 2' || tags[0] === 'Phase 1' || tags[0] === 'Phase 0'
                ? '#61bb99'
                : '#f0f2f7'
          }" />
      </div>
      <div
        class="phase-content"
        style="left: -44px"
        :class="
          tags[0] === 'Phase 3' || tags[0] === 'Phase 2' || tags[0] === 'Phase 1' || tags[0] === 'Phase 0'
            ? 'phase-content-3'
            : ''
        ">
        Phase3
      </div>
    </div>
    <div class="progress-item">
      <div
        v-if="tags[0] === 'Phase 2' || tags[0] === 'Phase 1' || tags[0] === 'Phase 0'"
        class="phase2"
        :style="{ width: tags[0] === 'Phase 2' ? '50%' : '100%' }"></div>
      <div class="name">
        <span>{{
          clientPhaseList[clientPhaseList.length - 2].entryDateAdd === '--'
            ? ''
            : clientPhaseList[clientPhaseList.length - 2].entryDateAdd
        }}</span>
        <span>{{ clientPhaseList[clientPhaseList.length - 2].displayName }}</span>
      </div>
      <div class="triangle">
        <e-icon
          type="Unfold"
          font-size="16px"
          :style="{
            color: tags[0] === 'Phase 2' || tags[0] === 'Phase 1' || tags[0] === 'Phase 0' ? '#9fa552' : '#f0f2f7'
          }" />
      </div>
      <div
        class="phase-content"
        style="left: -44px"
        :class="tags[0] === 'Phase 2' || tags[0] === 'Phase 1' || tags[0] === 'Phase 0' ? 'phase-content-2' : ''">
        Phase2
      </div>
    </div>
    <div class="progress-item">
      <div
        v-if="tags[0] === 'Phase 1' || tags[0] === 'Phase 0'"
        class="phase1"
        :style="{ width: tags[0] === 'Phase 1' ? '50%' : '100%' }"></div>
      <div class="name">
        <span>{{
          clientPhaseList[clientPhaseList.length - 3].entryDateAdd === '--'
            ? ''
            : clientPhaseList[clientPhaseList.length - 3].entryDateAdd
        }}</span>
        <span>{{ clientPhaseList[clientPhaseList.length - 3].displayName }}</span>
      </div>
      <div class="name2">
        <span>{{
          clientPhaseList[clientPhaseList.length - 4].entryDateAdd === '--'
            ? ''
            : clientPhaseList[clientPhaseList.length - 4].entryDateAdd
        }}</span>
        <span>{{ clientPhaseList[clientPhaseList.length - 4].displayName }}</span>
      </div>
      <div class="triangle">
        <e-icon
          type="Unfold"
          font-size="16px"
          :style="{ color: tags[0] === 'Phase 1' || tags[0] === 'Phase 0' ? '#ffad64' : '#f0f2f7' }" />
      </div>
      <div class="triangle2">
        <e-icon type="Unfold" font-size="16px" :style="{ color: tags[0] === 'Phase 0' ? '#eb8585' : '#f0f2f7' }" />
      </div>
      <div
        class="phase-content"
        style="left: -44px"
        :class="tags[0] === 'Phase 1' || tags[0] === 'Phase 0' ? 'phase-content-1' : ''">
        Phase1
      </div>
      <div class="phase-content" style="right: -44px" :class="tags[0] === 'Phase 0' ? 'phase-content-close' : ''">
        <span>Close</span>
        <CheckOutlined v-if="tags[0] === 'Phase 0'" style="color: #e14d4d; margin-left: 6px" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { CheckOutlined } from '@ant-design/icons-vue'
import EIcon from '@/components/EIcon.vue'

defineProps({
  tags: Array,
  clientPhaseList: Array
})
</script>

<style scoped lang="less">
.progress {
  width: 78%;
  height: 4px;
  background-color: @phase-default;
  border-radius: 2px;
  display: flex;
  .progress-item {
    flex: 1;
    height: 100%;
    position: relative;
    .phase3 {
      height: 100%;
      background-color: @phase3;
    }
    .phase2 {
      height: 100%;
      background-color: #d2db5f;
    }
    .phase1 {
      height: 100%;
      background-color: #e5a434;
    }
    .triangle,
    .triangle2 {
      width: 0;
      height: 0;
      position: absolute;
      top: -18px;
    }
    .triangle {
      left: -8px;
    }
    .triangle2 {
      right: 8px;
    }
    .name,
    .name2 {
      width: 70%;
      position: absolute;
      top: 15px;
      color: @deep-gray;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .name {
      left: -35%;
    }
    .name2 {
      left: -35%;
    }
    .phase-content {
      width: 88px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      position: absolute;
      top: -48px;
      background-color: @phase-default;
      color: @deep-gray;
    }
    .phase-content-3 {
      color: @phase3;
      border: 1px solid #91dcc0;
      background-color: @phase3-bg;
    }
    .phase-content-2 {
      color: #9fa552;
      border: 1px solid @phase2;
      background-color: @phase2-bg;
    }
    .phase-content-1 {
      color: #fc8f2f;
      border: 1px solid @phase1;
      background-color: @phase1-bg;
    }
    .phase-content-close {
      color: @phase0;
      border: 1px solid #eb8585;
      background-color: @phase0-bg;
    }
  }
}
</style>
